<template>
  <div>
    <el-container>
      <el-header style="width: 100%; height: 375px; background-color:#392f59 ;">
        <!--电影详情的主块        -->
        <div style="margin: 0 auto; color: white;
 width: 1200px; height: 375px ;margin: 0 auto">
          <el-row :gutter="20" style="margin: 70px 30px 0 0;">
            <el-col span="6">
              <div style=" padding-bottom:40px;" >
                <img src="/img/1.jpg" style="height: 322px; width: 232px;border: 5px solid white ;">
              </div>

            </el-col>
            <el-col :span="18">
              <div style="width: 800px; height: 300px;">
                <div style="width:800px; height: 155px;">
                  <h1 id="title_h1">敢死队4：最终章</h1>
                  <p id="title_p">Expend4bles</p>
                  <div style="width:250px;height:66px">
                    <div style="text-align: left;margin: 12px 0;">
                      <a class="type" href="javascript:void (0)">动作</a>
                      <a class="type" href="javascript:void (0)">冒险</a>
                    </div>
                    <p style="text-align: left;margin: 12px 0;">美国 <span>/ 101分钟</span></p>
                    <p style="text-align: left;margin: 12px 0;">2023-09-15 09:00<span>中国大陆上映</span></p>
                  </div>
                </div>

                <!--评论 加购票-->
                <el-row gutter="20">
                  <el-col span="8">
                    <div style="width: 260px;height: 86px;text-align: left;margin-top:40px ;">
                      <template>
                        <el-row :gutter="10">
                          <el-button type="text" class="button">buttonCont</el-button>
                          <el-button type="text" class="button">buttonCont</el-button>
                        </el-row>
                        <el-row :gutter="10">
                          <el-button
                              style="margin-top: 10px;background-color: red;color: white;width: 250px;height: 40px;"
                              type="primary">特惠购票</el-button>
                        </el-row>

                      </template>
                    </div>

                  </el-col>

                  <el-col span="16">
                    <div style="width: 124px; height: 146px;">
                      <p style="text-align: left;margin-bottom: 8px">猫眼口碑</p>
                      <div>
                        <el-row :gutter="30">
                          <el-col span="8">
                            <p style="font-size: 30px;color: #ffc600;margin-bottom: 8px;">8.3</p>
                          </el-col>
                          <el-col span="16" >
                            <i class="el-icon-star-on" style="width: 20%;color: #ffc600 " v-for="i in m"></i>
                            <i class="el-icon-star-on" style="width: 20%;color: #ffffff " v-for="i in 5-m"></i>
                            <span style="font-size: 12px">17589人评分</span>

                          </el-col>
                        </el-row>

                        <p style="font-size: 12px;margin-bottom: 8px;text-align: left">累计票房</p>
                        <div style="width:124px;height:40px;text-align: left">
                          <span style="font-size: 30px;;">1.03 <span style="font-size: 12px"> 亿</span> </span>
                        </div>
                      </div>


                    </div>
                  </el-col>
                </el-row>

              </div>



              <el-row>
                <el-col span="12"></el-col>
                <el-col span="12"></el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </el-header>

      <el-main style="width: 1200px;height: 1500px; margin: 0 auto; ">

        <div style="width: 100%;margin-top: 80px">
          <el-row :gutter="10">
            <el-col :span="12">
              <div style="width: 730px;  ">
                <p style="text-align: left;margin-bottom: 25px">
                  <a class="el-alert_title" href="javascript:void (0)">猫眼电影</a> >
                  <a class="el-alert_title" href="javascript:void (0)">电影</a> >
                  敢死队4：最终章</p>

                <!--  点击框-->
                <el-menu mode="horizontal"

                         active-text-color="red">
                  <el-menu-item index="1" @click="introduce">介绍</el-menu-item>
                  <el-menu-item index="2" @click="job">演职人员</el-menu-item>
                  <el-menu-item index="3" @click="prizes">奖项</el-menu-item>
                  <el-menu-item index="4" @click="atlas">图集</el-menu-item>
                </el-menu>

                <div style="width: 730px;margin-top: 40px;height: 940px;
                background-color: white">

                  <router-view/>
                </div>

              </div>
            </el-col>

            <!--     预告片        -->
            <el-col :span="12">
              <div style="width: 360px; height: 244px;float: right" >
                <h2 style="font-size: 18px;color: #333 ;">预告片</h2>

                <div style="margin-bottom: 40px">
                  <el-row gutter="20" v-for="item in detail">

                    <el-col span=8>
                      <img :src="item.img" >
                    </el-col>

                    <el-col span="16">
                      <span>
                        <a href="javascript:void (0)"
                           style="font-size: 16px;color: #333;text-align: center">
                          {{item.brief}}</a>
                      </span>

                      <span>
                        <i class="el-icon-caret-right"></i>
                        <span style="font-size: 12px">{{item.play}}万</span>
                      </span>



                    </el-col>
                  </el-row>

                </div>

              </div>
            </el-col>
          </el-row>
        </div>



      </el-main>
    </el-container>






  </div>


</template>

<script>
export default {
  name: "FilmDetailView",
  data() {
    return {
      m: 4,
      detail:[{img:'/img/3.jpg',brief:'《敢死队4：最终章》电影《敢...',play:'22.1'},
        {img:'/img/3.jpg',brief:'《敢死队4：最终章》电影《敢...',play:'22.1'},
        {img:'/img/3.jpg',brief:'《敢死队4：最终章》电影《敢...',play:'22.1'}]
    }
  }, methods: {
    atlas() {
      this.$router.push('/filmDetail/atlas')
    },
    introduce(){
      this.$router.push('/filmDetail/introduce')
    },
    job(){
      this.$router.push('/filmDetail/job')
    },
    prizes(){
      this.$router.push('/filmDetail/prizes')
    }
  },
  mounted() {
    this.$router.push('/filmDetail/introduce')
  }
}
</script>

<style scoped>
#title_h1{
  text-align: left;
  margin: 0;
  color: white;
}
#title_p{
  text-align: left;
  margin: 0;
  margin-bottom: 14px;
}
.type{
  display:inline;
  padding: 4px;
  text-decoration: none;
  color: white;
}
p,span{
  margin: 0;
}
.button{
  background:#756189;
  border-radius:2px ;
  color: white;
  width: 120px;
  height: 36px;
}
a{
  text-decoration: none;
}
.el-alert_title{
  color: #333;
}

</style>